<template>
  <div class="edit-container">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>修改商品</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 警告条 -->
      <el-alert title="修改商品信息" center type="warning" show-icon :closable="false"> </el-alert>
      <el-form ref="editGoodsFormRef" :model="editGoodsForm" label-position="top" :rules="editGoodsFormRules">
        <el-form-item label="商品名称" prop="goods_name">
          <el-input v-model="editGoodsForm.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="goods_price">
          <el-input v-model="editGoodsForm.goods_price" type="number"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="goods_number">
          <el-input v-model="editGoodsForm.goods_number" type="number"></el-input>
        </el-form-item>
        <el-form-item label="商品重量" prop="goods_weight">
          <el-input v-model="editGoodsForm.goods_weight" type="number"></el-input>
        </el-form-item>
        <!-- <el-form-item label="商品图片">
          <el-upload :action="uploadURL" :on-remove="handleRemove" :on-success="handleSuccess" list-type="picture" :headers="headerObj" :file-list="editGoodsForm.pics" ref="uploadRef">
            <el-button size="small" type="primary">添加图片</el-button>
          </el-upload>
        </el-form-item> -->
        <el-form-item label="商品介绍" prop="goods_introduce">
          <!-- 富文本编辑器 -->
          <quill-editor v-model="editGoodsForm.goods_introduce"></quill-editor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="edit">确认修改</el-button>
          <el-button type="info" @click="cancel">取消修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  props: ['id'],
  data() {
    return {
      // editGoodsForm1: {
      //   goods_name: '', // 商品名称
      //   goods_price: '', // 商品价格
      //   goods_number: '', // 商品数量
      //   goods_weight: '', // 商品重量
      //   goods_introduce: '', // 商品介绍
      //   pics: '', // 上传的图片临时路径（对象）
      //   attrs: '' // 商品的参数（数组）
      // },

      // 表单绑定对象
      editGoodsForm: {},
      // 修改商品信息的表单验证规则对象
      editGoodsFormRules: {
        goods_name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        goods_price: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],
        goods_number: [{ required: true, message: '请输入商品数量', trigger: 'blur' }],
        goods_weight: [{ required: true, message: '请输入商品重量', trigger: 'blur' }],
        goods_introduce: [{ required: true, message: '请输入商品介绍', trigger: 'blur' }]
      },
      // 图片上传的URL地址
      uploadURL: 'http://127.0.0.1:8888/api/private/v1/upload',
      // 上传图片时设置请求头
      headerObj: {
        Authorization: window.sessionStorage.getItem('token')
      }
    }
  },
  methods: {
    async getGoodsInfo() {
      const { data: res } = await this.$http({
        method: 'get',
        url: '/goods/' + this.id
      })
      // console.log(res)
      if (res.meta.status !== 200) return this.$message.error('获取商品信息失败' + res.meta.msg)
      this.editGoodsForm = res.data
      // 处理图片
      // var photo = []
      // this.editGoodsForm.pics.forEach((item) => {
      //   // console.log(item)
      //   photo.push({ pic: item.pics_sma, url: item.pics_sma_url })
      // })
      // this.editGoodsForm.pics = photo
      // console.log(this.editGoodsForm.pics)
      // 处理参数
      var attr = []
      this.editGoodsForm.attrs.forEach((item) => {
        attr.push({ attr_id: item.attr_id, attr_value: item.attr_value })
      })
      this.editGoodsForm.attrs = attr

      // console.log(this.editGoodsForm)
    },
    // 图片上传成功钩子函数
    // handleSuccess(res) {
    //   this.editGoodsForm.pics.push({ pic: res.data.tmp_path, url: res.data.url })
    //   console.log(this.editGoodsForm.pics)
    // },
    // 删除图片触发
    // handleRemove(file) {
    //   console.log(file)
    //   this.editGoodsForm.pics = this.editGoodsForm.pics.filter((item) => {
    //     return item.uid !== file.uid
    //   })
    //   console.log(this.editGoodsForm.pics)
    // },
    // 确认修改
    edit() {
      // console.log(this.editGoodsForm.attrs)
      this.$refs.editGoodsFormRef.validate(async (valid) => {
        if (!valid) return this.$message.error('请按要求填写表单内容')
        const { data: res } = await this.$http({
          method: 'PUT',
          url: '/goods/' + this.id,
          data: {
            goods_name: this.editGoodsForm.goods_name, // 商品名称
            goods_price: this.editGoodsForm.goods_price, // 商品价格
            goods_number: this.editGoodsForm.goods_number, // 商品数量
            goods_weight: this.editGoodsForm.goods_weight, // 商品重量
            goods_introduce: this.editGoodsForm.goods_introduce, // 商品介绍
            // pics: this.editGoodsForm.pics, // 上传的图片临时路径（对象）
            attrs: this.editGoodsForm.attrs,
            goods_cat: this.editGoodsForm.goods_cat
          }
        })
        if (res.meta.status !== 200) return this.$message.error('更新商品信息失败')
        this.$message.success('更新商品信息成功')
        this.$router.push('/goods')
      })
    },
    // 取消修改
    cancel() {
      this.$message.info('已取消修改')
      this.$router.push('/goods')
    }
  },
  // computed: {
  //   fileList() {
  //     var picArr = []
  //     if (this.editGoodsForm.pics) {
  //       this.editGoodsForm.pics.forEach((item) => {
  //         picArr.push({ url: item.pics_sma_url })
  //       })
  //     }
  //     return picArr
  //   }
  // },
  created() {
    this.getGoodsInfo()
  }
}
</script>

<style lang="less" scoped></style>
